<template>
  <div class="app-container workbench-content">
    <div class="show_work_data">
      <div class="show_worker_info">
        <el-avatar :size="50"
          :src="curUserInfo.avatar"></el-avatar>
        <div class="worker_info_deteil">
          <div class="worker_info_1">{{timeStr}}好，{{curUserInfo.nickName || '--'}}，欢迎登陆工作台！</div>
          <div class="worker_info_2">
            {{curUserInfo.postName || ''}}
            <span class="ml10 mr10"
              v-if="curUserInfo.postName">|</span>
            <!-- {{curUserInfo.storeName || '--'}} -->
            <el-select v-model="selectStoreId"
              placeholder="请选择"
              size="mini"
              @change="selectStoreChange">
              <el-option :value="item.storeUid"
                v-for="(item, idx) in storeList"
                :key="idx"
                :label="item.storeName"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="show_work_nowDay">
        <div class="show_item_work">
          <div class="show_item_work_label">今日预约客户（人）</div>
          <div class="show_item_work_number">{{curUserInfo.subscribeCountDay || '0'}}</div>
        </div>
        <div class="show_item_work">
          <div class="show_item_work_label">本月预约客户（人）</div>
          <div class="show_item_work_number">{{curUserInfo.subscribeCountMonth || '0'}}</div>
        </div>
        <div class="show_item_work">
          <div class="show_item_work_label">本月卡耗（元）</div>
          <div class="show_item_work_number">{{curUserInfo.sumPriceMonth || '0'}}</div>
        </div>
      </div>
    </div>
    <div class="work_content">
      <div class="work_content_top">
        <div class="seleck_work_box">
          <el-date-picker v-model="selectDate"
            style="width: 200px"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="MM月dd日"
            value-format="yyyy-MM-dd"
            size="mini"
            @change="dateChange">
          </el-date-picker>
        </div>
        <div class="work_store_name">{{curUserInfo.storeName}}</div>
      </div>
      <div class="work_content_data"
        ref="workContent">
        <div class="work_content_item"
          v-for="(item, index) in dataList"
          :key="index">
          <div class="work_content_item_label"
            :class="{ 'work_content_item_label_scroll': scrollLeft > 0 }"
            :style="{ left: `${scrollLeft}px`, zIndex: index == 0? 1010: 1 }">
            <div class="work_content_item_label_top"
              v-if="index == 0"
              :style="{ top: `${scrollTop - 51}px` }"></div>
            {{item.beauticianName}}
          </div>
          <div class="work_content_item_list">
            <div :class="['work_data_item', 
              val.workStatus == '1' && val.projectList.length > 0 && 'work_data_item_act', 
              val.workStatus == '0' && 'work_data_item_rest']"
              v-for="(val, idx) in item.list"
              :key="idx"
              @click="toJumpShowDetail(index, idx)">
              <div class="work_content_item_date"
                :style="{ top: `${scrollTop - 51}px` }"
                v-if="index == 0">{{val.weekDayName}} ({{val.dateStr}})</div>
              <template v-if="val.workStatus == '1'">
                <el-tooltip class="item"
                  effect="dark"
                  :content="v.projectName"
                  placement="top-start"
                  v-for="(v, i) in val.showProject"
                  :key="i">
                  <div class="work_data_item_time">
                    <div class="work_data_item_time_txt">{{v.time}}</div>
                    <div class="work_data_item_time_customer">{{v.customerName}}</div>
                  </div>
                </el-tooltip>
                <div class="work_data_item_project">共{{val.projectList.length}}个预约 {{val.projectCount}}个项目 <span v-if="val.projectList.length > 3">点击查看更多</span></div>
              </template>
              <span v-else-if="val.workStatus == '0'">休息</span>
            </div>
          </div>
        </div>
        <el-empty v-if="dataList.length == 0"
          style="margin: 0 auto"
          description="暂无数据"></el-empty>
      </div>
    </div>
    <LifeProjectDetail :beauticianName="beauticianName"
      v-if="selectDay"
      :show="showDialog"
      :selectDay="selectDay"
      :selectUid="selectUid"
      @toCloseDialog="toCloseDialog" />
  </div>
</template>

<script>
import calendar from "@/utils/calendar"
import LifeProjectDetail from './lifeProjectDetail.vue'
import {
  currentUserInfo,
  lifiWorkInfo,
  getCanViewStore
} from "@/api/service/workbench";

export default {
  name: 'workbenchLife',
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      calendarList: [],
      weekList: ['日', '一', '二', '三', '四', '五', '六'],
      selectDate: [],
      showWorkBoard: true,
      dataList: [],
      scrollLeft: 0,
      scrollTop: 0,
      showDialog: false,
      curUserInfo: {},
      selectDay: '',
      selectUid: '',
      beauticianName: '',
      storeList: [],
      selectStoreId: '',
      refreshTimes: ''
    }
  },
  components: {
    LifeProjectDetail
  },
  computed: {
    timeStr () {
      let t = new Date().getHours()
      if (t >= 5 && t < 9) {
        return '早上'
      } else if (t >= 9 && t < 12) {
        return '上午'
      } else if (t >= 12 && t < 18) {
        return '下午'
      } else {
        return '晚上'
      }
    },
  },
  created () {
    let nowTime = new Date()
    this.calendarList = this.getCurrentWeek(nowTime)
    this.selectDate = [this.calendarList[0], this.calendarList[this.calendarList.length - 1]]

    // this.getCurrentUserInfo()
    // this.getData()
    this.getViewStoreList()
  },
  activated () {
    this.scrollLeft = 0
    this.scrollTop = 0
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.workContent.addEventListener('scroll', this.workContentScroll, true)
    })
  },
  beforeDestroy () {
    this.$refs.workContent.removeEventListener('scroll', this.workContentScroll)
  },
  methods: {
    selectStoreChange () {
      this.getCurrentUserInfo()
      this.getData()
      this.intervalData()
    },
    intervalData () {
      clearInterval(this.refreshTimes)
      this.refreshTimes = setInterval(() => {
        this.getData()
      }, 1 * 60 * 1000)
    },
    async getViewStoreList () {
      let res = await getCanViewStore({ type: 'Life' })
      if (res) {
        let { data } = res
        this.storeList = data
        if (data.length == 1) {
          this.selectStoreId = data[0].storeUid
          this.getCurrentUserInfo()
          this.getData()
          this.intervalData()
        }
      }
    },
    async getCurrentUserInfo () {
      let res = await currentUserInfo({ type: 'curUserInfo', storeId: this.selectStoreId })
      if (res) {
        this.curUserInfo = res.data
      }
    },
    dateChange (e) {
      let startDate = e[0], endDate = e[1], startTime = new Date(startDate).getTime()
      this.calendarList = []
      this.makeDateList(startTime, endDate)
      setTimeout(() => {
        this.getData()
        this.intervalData()
      })
    },
    makeDateList (dateTime, endDate) {
      if (dateTime <= new Date(endDate).getTime()) {
        this.calendarList.push(new Date(dateTime).format('yyyy-MM-dd'))
        this.makeDateList(dateTime + 24 * 60 * 60 * 1000, endDate)
      }
    },
    toJumpShowDetail (index, idx) {
      let item = this.dataList[index].list[idx]
      if (item.workStatus == '1') {
        this.selectDay = item.date
        this.selectUid = this.dataList[index].id
        this.beauticianName = this.dataList[index].beauticianName
        this.showDialog = true
      }
    },
    toCloseDialog () {
      this.showDialog = false
      this.selectDay = ''
      this.selectUid = ''
      this.beauticianName = ''
    },
    workContentScroll () {
      this.scrollLeft = this.$refs.workContent.scrollLeft
      this.scrollTop = this.$refs.workContent.scrollTop
    },
    async getData () {
      const $this = this
      let res = await lifiWorkInfo({
        startDate: this.selectDate[0],
        endDate: this.selectDate[1],
        storeId: this.selectStoreId
      })
      if (res) {
        let { data } = res
        data.forEach(item => {
          let arr = []
          this.calendarList.forEach((dateVal, index) => {
            let val = item.list.filter(v => v.date == dateVal)
            if (val.length < 1) {
              arr[index] = {
                "date": dateVal,
                "workStatus": "-1",
                "projectCount": "0",
                "projectList": []
              }
            } else {
              arr[index] = val[0]
            }
          })
          item.list = JSON.parse(JSON.stringify(arr))
          item.list.forEach(val => {
            let weekDay = new Date(val.date).getDay()
            val.weekDayName = `星期${this.weekList[weekDay]}`
            let dateStrArr = val.date.split('-')
            val.dateStr = `${dateStrArr[1]}/${parseInt(dateStrArr[2])}`

            if (val.projectList.length > 3) {
              val.showProject = val.projectList.slice(0, 3)
            } else {
              val.showProject = val.projectList
            }
          })
        })

        this.dataList = data
      }

    },
    getCurrentWeek (nowTime) {
      let list = []
      let curTimeStamp = nowTime.getTime()
      for (let i = 0; i < 7; i++) {
        let timeStamp = curTimeStamp + i * 86400000
        let date = new Date(timeStamp).format('yyyy-MM-dd')
        list.push(date)
      }
      return list
    },
  }
}
</script>

<style lang="scss" scoped>
.workbench-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.show_work_data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 16px;
  .show_worker_info {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    .worker_info_deteil {
      flex: 1;
      overflow: hidden;
      margin-left: 10px;
      .worker_info_1 {
        font-size: 20px;
        color: #333;
        margin-bottom: 12px;
      }
      .worker_info_2 {
        font-size: 14px;
        color: #999;
        display: flex;
        align-items: center;
      }
    }
  }
  .show_work_nowDay {
    display: flex;
    align-items: center;
    .show_item_work {
      padding: 0 20px;
      &:not(:last-child) {
        border-right: 1px solid #eee;
      }
      .show_item_work_label {
        font-size: 12px;
        color: #333;
        margin-bottom: 16px;
        text-align: center;
      }
      .show_item_work_number {
        font-size: 16px;
        font-weight: 600;
        text-align: center;
      }
    }
  }
}
.work_content {
  flex: 1;
  overflow: hidden;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .work_content_top {
    height: 50px;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    .seleck_work_box {
      position: relative;
      z-index: 10;
    }
    .work_store_name {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      line-height: 50px;
      text-align: center;
    }
  }
  .work_content_data {
    flex: 1;
    padding-top: 50px;
    width: 100%;
    overflow: auto;
    // border-bottom: 1px solid #eee;
    .work_content_item {
      white-space: nowrap;
      position: relative;
      padding-left: 80px;
      height: 120px;
      .work_content_item_label {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        height: 100%;
        width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        color: #333;
        background-color: #fff;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
        text-align: center;
        padding: 5px;
      }
      .work_content_item_label_top {
        position: absolute;
        top: -50px;
        left: -1px;
        width: 81px;
        height: 50px;
        z-index: 1;
        background-color: #f8f8f9;
        border-bottom: 1px solid #eee;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
      }
      .work_content_item_label_scroll {
        border-right: 1px solid #eee;
      }
      .work_content_item_list {
        height: 100%;
        display: inline-block;
        white-space: nowrap;
        .work_data_item {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          width: 180px;
          height: 120px;
          border-top: 1px solid #eee;
          border-left: 1px solid #eee;
          border-bottom: 1px solid #eee;
          &:last-child {
            border-right: 1px solid #eee;
          }
          .work_data_item_project {
            margin-top: 8px;
            white-space: normal;
            padding: 10px 6px;
            font-size: 12px;
          }
        }
        .work_content_item_date {
          position: absolute;
          top: -50px;
          left: 0;
          z-index: 999;
          width: 180px;
          height: 50px;
          color: #333;
          font-size: 14px;
          text-align: center;
          line-height: 50px;
          background-color: #f8f8f9;
          border-bottom: 1px solid #eee;
          border-right: 1px solid #eee;
          cursor: default;
        }
        .work_data_item_act {
          background-color: rgba(48, 176, 143, 0.7);
          color: #fff;
          font-size: 12px;
          padding: 10px 6px;
          position: relative;
          cursor: pointer;
          .work_data_item_time {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            cursor: pointer;
            padding: 3px 4px;
            line-height: 1;
            overflow: hidden;
            &:hover {
              background-color: #30b08f;
              border-radius: 1px;
            }
          }
          .work_data_item_project {
            margin-top: 8px;
            white-space: normal;
          }
        }
        .work_data_item_rest {
          background-color: #e9e9e9;
          font-size: 16px;
          color: #333;
          text-align: center;
          line-height: 120px;
        }
      }
    }
  }
}
</style>